<template>
  <div class="order" style="background: #F5F6F7;">
    <div class="orderTitle">
      <div class="orderTitleCenter">
        <img class="logoTop" src="../../img/xz.png"/>
        <span>订单信息</span>
      </div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">订单号</span><span class="orderTitleinnerright">PE120380279472910</span></div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">实付金额</span><span class="orderTitleinnerright">300</span></div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">订单时间</span><span class="orderTitleinnerright">2024-12-01 12:00:00</span></div>
    </div>
    <div class="orderTitle">
      <div class="orderTitleCenter">
        <img class="logoTop" src="../../img/cp.png"/>
        <span>产品信息</span>
      </div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">产品名称</span><span class="orderTitleinnerright">圣诞圣诞圣诞</span></div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">产品数量</span><span class="orderTitleinnerright">10</span></div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">产品总价</span><span class="orderTitleinnerright">300</span></div>
      <div class="orderTitleinner"><span class="orderTitleinnerleft">门店名称</span><span class="orderTitleinnerright">长宁区店铺</span></div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    document.title = '订单详情'; // 修改页面标题
  }
}
</script>

<style scoped lang="less">
  .order{
    .orderTitle{
      background: #fff;
      margin: 19px 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 0.42667rem;
      color: #333333;
      font-style: normal;
      padding-bottom: 16px;
      .orderTitleCenter{
        padding:12px 15px;
        border-bottom:1px solid #E9E9E9;
        display: flex;
        align-items: center;
        line-height: 0.58667rem;
        text-align: left;
        img{
          width: 13px;
          height: 15px;
          margin-right: 6px;
        }
      }
      .orderTitleinner{
        margin: 12px 12px 0px;
        display: flex;
        align-items: center;
        .orderTitleinnerleft{
          width: 30%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        .orderTitleinnerright{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
</style>
